<template>
  <el-dialog :visible.sync="open" @close="close" :title="title" width="800px">
    <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="计划标题" prop="planTitle">
            <el-input v-model="formData.planTitle" placeholder="请输入计划标题" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="所属部门" prop="dept">
            <el-input v-model="makeDeptName" placeholder="选择所属部门" :style="{ width: '100%' }" @focus="selectMakeDept"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="演练日期" prop="date">
            <el-date-picker v-model="formData.planDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请输入演练日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="演练地点" prop="location">
            <el-input v-model="formData.planLocation" placeholder="请输入演练地点" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">{{ isedit ? "保存" : "下一步，编辑内容" }}</el-button>
    </div>
    <dept-picker ref="deptPicker" :muilt="false" @handleOk="setMakeDept" />
  </el-dialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import DeptPicker from "@/views/components/deptPicker/index.vue";
import * as Auth from "@/utils/auth";

export default {
  name: "DrillEditDialog",
  mixins: [dialogMixin],
  components: { DeptPicker },
  props: [],
  data() {
    return {
      formData: {
        planId: 0,
        planTitle: "",
        deptId: "",
        planDate: "",
        planLocation: "",
        createUser: 0,
      },
      makeDeptName: "",
      title: "编辑演练计划",
      isedit: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add() {
      this.formData = {
        planId: 0,
        planTitle: "",
        deptId: "",
        planDate: "",
        planLocation: "",
        createUser: Auth.getUserId(),
      };
      this.makeDeptName = "";
      this.isedit = false;
      this.open = true;
    },
    edit(data) {
      this.formData = Object.assign({}, data);
      this.formData.createUser = Auth.getUserId();
      this.makeDeptName = data.deptName;
      this.isedit = true;
      this.open = true;
    },
    selectMakeDept() {
      this.$refs.deptPicker.show();
    },
    setMakeDept(dept) {
      this.formData.deptId = dept.id;
      this.formData.deptName = dept.name;
      this.makeDeptName = dept.name;
    },
    handleConfirm() {
      this.$emit("handleOk", this.formData);
    },
  },
};
</script>
<style></style>
